<template>
	 <el-container style="height: 100%;width:100%;padding:0 ;position:fixed">
	 <el-header style="width:100%;padding:0;">
	  <Navbar style="height:60px"></Navbar>
	</el-header>
	
		<el-container>
			<el-aside style="background-color: #fff; width: 75%;height: 89%; max-height: 720px; margin: 1%;  border-radius: 2%;  box-shadow:0px 0px 12px rgba(0, 0, 0, 0.12); padding: 20px ; ">
			
				<div style="height: 100%; margin-bottom: 2%;text-align: left;"  >
			 <div class="exam-container" style="padding-left:6%;" >	
				<!-- <h2 class="exam-title">{{ examTitle }}</h2> -->
				<div v-for="(question, index) in datas.data" :key="question.id" :id="'question-' + question.id">
				  <div class="question-container">
					<span class="question-number">{{ index + 1 }}.</span>
					<span class="question-type">{{ questionType[question.type] }}：</span>
					<span class="question-title">{{ question.content.title }}</span><span class="question-title">({{ question.points }}分)</span> <span v-for="item in question.tags"><el-tag size="small" style="margin-left: 5px;">{{item}}</el-tag></span>
					<span><el-tag effect="dark" :type="question.is_right?'success':'danger'" size="small" style="margin-left: 5px;" v-text="question.is_right?'正确':'错误'"></el-tag></span>
						

					
				  </div>
				  
				  <div v-if="question.type == 0" class="answer-container"   style="margin-bottom: 2%; ">
					<el-radio-group v-model="question.panswer[0]" size="medium" style=" text-align: left;" disabled >
					  <el-radio :key="question.id" label="A" style="width: 100%;" >A: {{ question.content.A }}</el-radio>
					  <el-radio :key="question.id" label="B" style="width: 100%;" >B: {{ question.content.B }}</el-radio>
					  <el-radio :key="question.id" label="C" style="width: 100%;">C: {{ question.content.C }}</el-radio>
					  <el-radio :key="question.id" label="D" style="width: 100%;">D: {{ question.content.D }}</el-radio>
					</el-radio-group>
				  </div>
				  
				  <div v-if="question.type == 2" class="answer-container" style="margin-bottom: 2%; ">
					<el-checkbox-group v-model="question.panswer"  size="medium" style=" text-align: left;" disabled>
					  <el-checkbox style="width: 100%;" label="A" >A: {{ question.content.A }}</el-checkbox>
					  <el-checkbox style="width: 100%;" label="B" >B: {{ question.content.B }}</el-checkbox>
					  <el-checkbox style="width: 100%;" label="C" >C: {{ question.content.C }}</el-checkbox>
					  <el-checkbox style="width: 100%;" label="D" >D: {{ question.content.D }}</el-checkbox>
					   <el-checkbox style="width: 100%;" label="E"  >E: {{ question.content.E }}</el-checkbox>
					</el-checkbox-group>
				  </div>
				  
				  <div v-if="question.type == 1" class="answer-container">
					<textarea v-if="question.content.othercontent!=''" style="min-width: 600px;min-height:280px; max-width:600px;" disabled>{{question.content.othercontent}}</textarea>
					<el-input v-model="question.panswer[0]" placeholder="请输入答案" style="width: 600px ;" disabled></el-input>
				  </div>
				  
				  
				  <div v-if="question.type == 3" class="answer-container">
					<el-radio-group v-model="question.panswer[0]" @change="rr(question)" size="medium" disabled>
					  <el-radio label="true">正确</el-radio>
					  <el-radio label="false">错误</el-radio>
					</el-radio-group>
				  </div>
				  
				  <div v-if="question.type == 4" class="answer-container bct">
					  <textarea v-if="question.content.othercontent!=''" style="min-width: 600px;min-height:280px;" disabled>{{question.content.othercontent}}</textarea>
					<el-input v-model="question.panswer[0]" disabled placeholder="请输入代码答案" size="medium" type="textarea"  @keydown.enter="addNewLine"></el-input>
				  </div>
					<div v-if="question.type==4 ">正确答案：<br> <textarea v-for="item in question.rightanswer" style="min-width: 600px;min-height:280px; max-width:600px;" disabled>{{item}}</textarea></div>
					<div v-else-if="question.type==3 " >正确答案：<span v-if="question.rightanswer[0]==true" >正确</span><span v-else >错误</span></div>
					<div v-else >正确答案：<span v-for="item in question.rightanswer" >{{item}}</span></div>
				</div>
				<div class="submit-container">
				   <el-divider content-position="right">到底啦</el-divider>
				</div>
			  </div>
				</div>	
			</el-aside>
			<el-main style="background-color: #fff; margin: 1%;  height: 89%; border-radius: 2%;   box-shadow:0px 0px 12px rgba(0, 0, 0, 0.12);">
				<h2>题目总览</h2>
				  <el-divider content-position="left">答题情况</el-divider>
				<div style="display: flex; flex-wrap: wrap; width: 230px;">
				  <div v-for="(test, index) in datas.data" :key="test.id" >
				    <div v-if="test.is_right"  @click="jumpToQuestion(index)" style="margin-bottom: 2%; margin-left:4px; background-color: #2cf029; color: #fff; border: 1px solid #e8e8e8; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;" v-text="index + 1"></div>
					<div v-else @click="jumpToQuestion(index)" style=" margin-bottom: 2%;margin-left:4px;border: 1px solid #e8e8e8;background-color: #f00024;color: #fff; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;" v-text="index + 1"></div>
				  </div>
				</div>
				<div class="submit-container">
					<el-divider content-position="left"> 操作</el-divider>
				  <el-button type="primary" size="medium" @click="submit" style="width: 250px;" :loading="loading">返回列表</el-button>
				</div>
				
				<img src="/src/assets/learn.png" alt="" style="width: 100%;margin-top: 4%;" />
				
			</el-main>
		  </el-container>
		
	</el-container>
</template>

<script lang="ts" setup>
	import Navbar from '@/components/layouts/navbar.vue';
	import { ref,reactive ,onMounted} from 'vue'
	import { useRouter, useRoute} from 'vue-router'
	import axios from 'axios'
	import { ElMessage } from 'element-plus';
	const loading = ref(false)
	const router = useRouter()
	const route = useRoute()
	const rr = (hand) =>{
		console.log(hand)
	}
	const datas = reactive({
		paperid:"31444",
		time:"2023-03-23",
		status:'finished',
		form:{
			answer:[
				
			]
		},
		lines:2,
		data:[
			{
				id:1,
				type:0,
				content:{
					title:'Java中，以下哪种数据结构不适合用于存储键值对？',
					A:'数组',
					B:'链表',
					C:'哈希表',
					D:'树',
					E:'',
					othercontent:'',	
				},
				is_right:false,
				panswer:["A"],
				rightanswer:["C"],
				point:10,
				tags:["java"]
				
			},
			{
				id:6,
				type:0,
				content:{
					title:'Java中，以下哪种数据结构不适合用于存储键值对？',
					A:'数组',
					B:'链表',
					C:'哈希表',
					D:'树',
					E:'',
					
					othercontent:''
				},
				is_right:true,
				panswer:["B"],
				rightanswer:["B"],
				point:10,
				tags:["java"]
				
			},{
				id:2,
				type:2,
				content:{
					title:'下面哪些选项是合法的 Python 代码，可以将一个列表按照元素从小到大排序：',
					A:'sorted_list = sorted([3, 1, 4, 2])',
					B:'sorted_list = sort([3, 1, 4, 2])',
					C:'sorted_list = [3, 1, 4, 2].sort()',
					D:'sorted_list = [3, 1, 4, 2].sorted()',
					E:'sorted_list = [3, 1, 4, 2].sort(reverse=True)',
					othercontent:''
				},
				is_right:false,
				panswer:["A","E","B"],
				rightanswer:["A","C"],
				point:20,
				tag:"java"
			},{
				id:3,
				type:1,
				content:{
					title:'下面选择法排序程序的输出是_____',
					A:'',
					B:'',
					C:'',
					D:'',
					E:'',
					othercontent:"def selectionSort(arr):\n    for i in range(len(arr) - 1):\n        # 记录最小数的索引\n        minIndex = i\n        for j in range(i + 1, len(arr)):\n            if arr[j] < arr[minIndex]:\n                minIndex = j\n        # i 不是最小数时，将 i 和最小数进行交换\n        if i != minIndex:\n            arr[i], arr[minIndex] = arr[minIndex], arr[i]\n        if i==2:print(arr[5])\n    return arr\n\nselectionSort([33,6,9,7,-1,100,-32])\n"
				},
				panswer:["22"],
				is_right:false,
				rightanswer:["null"],
				point:10,
				tag:"java"
			},{
				id:4,
				type:3,
				content:{
					title:"在JavaScript中，使用typeof操作符判断null值的类型会返回'null'",
					A:'',
					B:'',
					C:'',
					D:'',
					E:'',
					othercontent:""
				},
				panswer:['true'],
				is_right:true,
				rightanswer:['true'],
				point:10,
				tags:["java"]
			},{
				id:8,
				type:4,
				content:{
					title:'使用递归算法计算出多级菜单',
					A:'',
					B:'',
					C:'',
					D:'',
					E:'',
					othercontent:""
				},
				is_right:true,
				panswer:["xxxxxxxxxxxxxxxxxxxxxx"],
				rightanswer:["xxxxxxxx"],
				point:40,
				tags:["java"]
			},
			
		]
	})
	const addNewLine = () => {
	      this.text += "\n";
		  }
	const  jumpToQuestion = (index:any) =>{
		window.location.href='#question-' +index
	}
	const questionType = {
	      0: '单选题',
	      2: '多选题',
	      1: '填空题',
	      3: '判断题',
	      4: '编程题',
	    };
	const answers = ref(Array(datas.data.length).fill([]))
	
	const submit = () => {
			router.push('/history/all')
	    };

	const torpl = async () =>{
		const id = route.params.id
		try {
		  const response = await axios.get('/login/v1/examination/histories?paper_id='+id,{
			   headers: {
			  						'TOKEN': localStorage['token']
			  					  },
		  })
		  const data = response.data
		  if (data.code === 0) {
				data.data.questions.forEach((item) => {
					item.content = JSON.parse(item.content.replace(/'/g, '"'))
					item.answer = JSON.parse(item.answer.replace(/'/g, '"'))
					})
					data.data.meta.forEach((item) => {
						item.answer = JSON.parse(item.answer.replace(/'/g, '"'))
						})
				
				for (let i in data.data.questions){
					let x = data.data.questions[i]["q_type"]
					data.data.questions[i]["type"]=x
					
					data.data.questions[i]["rightanswer"]= data.data.questions[i]["answer"]
					data.data.questions[i]["panswer"]= data.data.meta[i]["answer"]
					data.data.questions[i]["is_right"]= data.data.meta[i]["is_right"]
					
				}
				datas.data = data.data.questions
				console.log(datas.data)
				
				
				
				
				
				
		  } else {
		  }
		} catch (error) {
		  console.error(error)
		}
		
		
	}
	
	onMounted(()=>{
		torpl()
	})
	
	
	
</script>

<style >
	.bct .el-textarea__inner{
		width:600px;
		min-width: 600px !important;
		min-height:280px !important;
	}
	.submit-container{
		margin: 2% 0 2% 0;
	}
</style>